<template>
	<view class="product-detail">
		<view class="product-video">
			<video 
				:src="detail.videoSrc" 
				:controls="false" 
				autoplay 
				:direction="90" 
				controls
				play-btn-position="center"
				@play="isPlaying = true" 
				@pause="isPlaying = false" 
				@error="videoErrorCallback"
			></video>
			<view class="video-title">{{ detail.videoTitle }}</view>
			<!-- <view class="video-play-control" v-if="!isPlaying" @click="play">
				<image src="../../static/play.png" mode="aspectFill"></image>
			</view> -->
		</view>
		<view class="product-detail-info">
			<view class="detail-item">
				<view class="item-title">产品名称</view>
				<view class="item-detail">{{ detail.name }}</view>
				<view class="item-title">包装规格</view>
				<view class="item-detail">{{ detail.specification }}</view>
				<view class="item-title">产品用途</view>
				<view class="item-detail">{{ detail.use }}</view>
				<view class="item-title">储存条件及有效期</view>
				<view class="item-detail">
					{{ detail.storageCondition }}
					<view>{{ detail.deadline }}</view>
				</view>
				
			</view>
			
			<view class="detail-item">
				<view class="item-title">样本收集及处理</view>
				<view class="item-detail">
					<view class="desc-item" v-for="(item, index) in detail.deal" :key="index">{{ item }}</view>
				</view>
			</view>
			
			<view class="detail-item">
				<view class="item-title">{{ detail.name }}取样流程</view>
				<view class="item-detail">
					<image :src="detail.flow" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="detail-item">
				<view class="item-title">观察检测结果</view>
				<view class="item-detail">
					<image :src="detail.result" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="detail-item">
				<view class="item-title">检测结果解释</view>
				<view class="item-detail">
					<view class="desc-item" v-for="(item, index) in detail.desc" :key="index">
						<text>{{index}}: </text>
						<text>{{ item }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		
		data() {
			return {
				isPlaying: false
			}
		},
		
		computed: {
			...mapState({
				detail: state => state.product.detail
			})
		},
		
		onLoad(option) {
			this.getDetailById(option.id)
		},
		
		methods: {
			async getDetailById(id) {
				let detail = await this.$store.dispatch('product/getDetailById', id)
			},
			
			videoErrorCallback(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			}
		}
	}
</script>

<style lang="scss">
	.product-video {
		width: view;
		height: 600rpx;
		position: relative;
		
		video {
			width: 100%;
			height: 100%;
		}
		
		.video-play-control {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 200rpx;
			height: 200rpx;
			z-index: 9999;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.video-title {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: auto;
			padding: 20rpx;
			background-color: rgba($color: #fff, $alpha: 0.7);
			color: #FFFDEF;
			font-size: 40rpx;
			z-index: 999;
		}
	}
	
	.product-detail-info {
		padding: 20rpx;
		margin-bottom: 80rpx;
	
		.detail-item {
			border-width: 1rpx;
			border-style: solid;
			border-color: #f5f5f5;
			border-radius: 20rpx;
			padding: 20rpx;
			background-color: #ffffff;
			color: #333333;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		
		.item-title {
			display: inline-block;
			width: auto;
			padding: 10rpx 40rpx;
			border-radius: 20rpx;
			background-image: linear-gradient(to right, #60d8d2, #478ce4);
			color: #FFFFFF;
			text-align: center;
		}
		
		.item-detail {
			line-height: 1.6;
			margin: 20rpx 0 40rpx;
			
			&:last-child {
				margin-bottom: 20rpx;
			}
			
			image {
				height: 560rpx;
			}
			
			.desc-item {
				margin: 10rpx 0 20rpx;
			}
		}
	}

</style>
